<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions()
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        color:['#5470c6','#9a60b4','#ee6666','#3ba272','#73c0de','#91cc75', '#fac858', '#fc8452', '#ea7ccc'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
          },
          legend: {
            data: ['总数', '小货车', '面包车', '安保车', '单车']
          },
          series: [
            {
              name: '车辆统计',
              type: 'funnel',
              left: '10%',
              top: 60,
              bottom: 60,
              width: '80%',
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside'
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                label: {
                  fontSize: 20
                }
              },
              data: [
                { value: 60, name: '单车' },
                { value: 40, name: '安保车' },
                { value: 20, name: '人员数量' },
                { value: 80, name: '小货车' },
                { value: 100, name: '车辆总数' }
              ]
            }
          ]
      })
    }
  }
}
</script>
